<template>
  <v-card class="file" flat>
    <header class="d-flex justify-end align-center head">
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-icon
            @click="$emit('add')"
            v-on="on"
            size="20"
            color="#fff"
            class="mr-3"
          >
            mdi-plus-thick
          </v-icon>
        </template>
        Add Folder
      </v-tooltip>
      <v-menu
        bottom
        left
        offset-y
        transition="slide-y-transition"
        :close-on-content-click="false"
      >
        <template v-slot:activator="{ on }">
          <v-tooltip bottom>
            <template v-slot:activator="{ on: tooltipOn }">
              <v-icon
                v-on="{ ...tooltipOn, ...on }"
                class="mr-3"
                size="20"
                color="#fff"
              >
                mdi-sort-ascending
              </v-icon>
            </template>
            Sort Folder
          </v-tooltip>
        </template>
        <v-list width="160" class="pa-0 list">
          <v-list-item
            v-for="item in sortBy"
            :key="item.title"
            class="pl-3 pr-3 cursor-pointer"
            @click="clickSortBy(item.value)"
          >
            <template>
              <v-list-item-icon class="mr-3">
                <v-icon
                  size="18"
                  color="#EB9B31"
                  :class="
                    sortByValue === item.value ? 'activate-icon' : 'hide-icon'
                  "
                >
                  mdi-check
                </v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title class="list-item-title">
                  {{ item.title }}
                </v-list-item-title>
              </v-list-item-content>
            </template>
          </v-list-item>
        </v-list>
        <v-list class="list">
          <v-divider></v-divider>
          <v-list-item
            v-for="item in sortDesc"
            :key="item.title"
            class="pl-3 pr-3 cursor-pointer"
            @click="clickSortDesc(item.value)"
          >
            <template>
              <v-list-item-icon class="mr-3">
                <v-icon
                  size="18"
                  color="#EB9B31"
                  :class="
                    sortDescValue === item.value ? 'activate-icon' : 'hide-icon'
                  "
                >
                  mdi-check
                </v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title class="list-item-title">
                  {{ item.title }}
                </v-list-item-title>
              </v-list-item-content>
            </template>
          </v-list-item>
        </v-list>
      </v-menu>
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-icon
            @click="refresh"
            v-on="on"
            color="#fff"
            size="20"
            class="mr-3"
          >
            mdi-autorenew
          </v-icon>
        </template>
        Refresh Folder
      </v-tooltip>
    </header>
    <v-treeview
      :active="[activatedValue ? activatedValue.id : '']"
      @update:active="activeFolder"
      :items="propFolderList"
      activatable
      expand-icon="mdi-chevron-down"
      class="text-left file-list"
      active-class="file-active"
    >
      <template #prepend="{ open }">
        <v-icon color="#79839B" size="20">
          {{ open ? "mdi-folder-open" : "mdi-folder" }}
        </v-icon>
      </template>
      <template #append="{ item }">
        <div @click.stop class="action">
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn @click="$emit('download', item)" v-on="on" icon>
                <v-icon color="#79839B" size="20">mdi-file-download</v-icon>
              </v-btn>
            </template>
            Download Folder
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn @click="$emit('edit', item)" v-on="on" icon>
                <v-icon color="#79839B" size="20">
                  mdi-square-edit-outline
                </v-icon>
              </v-btn>
            </template>
            Edit Folder Name
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn @click="$emit('delete', item)" v-on="on" icon>
                <v-icon color="#79839B" size="20">mdi-delete</v-icon>
              </v-btn>
            </template>
            Delete Folder
          </v-tooltip>
          <TooltipInfo title="Detail" width="345">
            <template #default="{ on }">
              <v-btn v-on="on" icon>
                <v-icon color="#79839B" size="20">mdi-information</v-icon>
              </v-btn>
            </template>
            <template #content>
              <v-spacer class="text-left">
                <v-col class="pa-0 mb-2">
                  <v-row no-gutters>
                    <v-col :cols="5">Type</v-col>
                    <v-col :cols="7">{{ item.type }}</v-col>
                  </v-row>
                </v-col>
                <v-col class="pa-0 mb-2">
                  <v-row no-gutters>
                    <v-col :cols="5">Size</v-col>
                    <v-col :cols="7">{{ item.size }}</v-col>
                  </v-row>
                </v-col>
                <v-col class="pa-0 mb-2">
                  <v-row no-gutters>
                    <v-col :cols="5">File Location</v-col>
                    <v-col :cols="7">
                      {{ item.fileLocation ? item.fileLocation : "-" }}
                    </v-col>
                  </v-row>
                </v-col>
                <v-col class="pa-0 mb-2">
                  <v-row no-gutters>
                    <v-col :cols="5">Modified</v-col>
                    <v-col :cols="7">{{ item.modifiedDate }}</v-col>
                  </v-row>
                </v-col>
              </v-spacer>
            </template>
          </TooltipInfo>
        </div>
      </template>
    </v-treeview>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, ModelSync } from "vue-property-decorator";
import { IFolder } from "@/components/Library/index";
import TooltipInfo from "@/components/TooltipInfo/TooltipInfo.vue";
@Component({
  components: {
    TooltipInfo,
  },
  props: {
    folderList: {
      type: Array,
      default: () => [],
    },
  },
})
export default class Folder extends Vue {
  @ModelSync("activated", "active", { type: Object })
  activatedValue!: IFolder | null;
  // folder
  getActiveFolder(parent: IFolder[], folderId: string): IFolder | undefined {
    for (let i = 0; i < parent.length; i++) {
      const treeItem = parent[i];
      if (treeItem.id === folderId) {
        return treeItem;
      }
      if (treeItem.children && treeItem.children.length !== 0) {
        const folder = treeItem.children.find((child) => {
          return child.id === folderId;
        });
        if (folder) {
          return folder;
        } else {
          const folder = this.getActiveFolder(treeItem.children, folderId);
          if (folder) {
            return folder;
          }
        }
      }
    }
    return undefined;
  }
  activeFolder([folderId]: [string]) {
    console.log(arguments);
    if (folderId) {
      this.activatedValue = this.getActiveFolder(
        this.propFolderList,
        folderId
      ) as IFolder;
    } else {
      this.activatedValue = null;
    }
  }
  get propFolderList() {
    return this.$props.folderList;
  }
  refresh() {
    this.$store.dispatch("refreshFolderList");
  }
  // sort
  get sortByValue() {
    return this.$store.state.LibraryStore.sortByValue;
  }
  set sortByValue(value: string) {
    this.$store.commit("setSortByValue", value);
  }
  get sortDescValue() {
    return this.$store.state.LibraryStore.sortDescValue;
  }
  set sortDescValue(value: boolean | null) {
    this.$store.commit("setSortDescValue", value);
  }
  sortBy = [
    {
      title: "Name",
      value: "name",
    },
    {
      title: "Size",
      value: "size",
    },
    {
      title: "Modified Date",
      value: "modifiedDate",
    },
  ];
  sortDesc = [
    {
      title: "Ascending",
      value: false,
    },
    {
      title: "Descending",
      value: true,
    },
    {
      title: "None",
      value: null,
    },
  ];
  clickSortBy(value: string) {
    this.sortByValue = value;
  }
  clickSortDesc(value: boolean | null) {
    this.sortDescValue = value;
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Library/Folder/Folder.scss";
</style>
